# Раздел услуг веб-студии

### Реализация

#### В песочнице CodePen

Перед началом работы сделайте форк пена на [https://codepen.io/Netology/pen/wEVjbj](https://codepen.io/Netology/pen/wEVjbj?editors=1100). Вносите изменения во вкладках HTML и CSS.

##### Внимание: Общую структуру документа создавать не надо, вкладка Codepen «HTML» работает, как тег `<body>`
см. [инструкцию по работе с Codepen](https://github.com/netology-code/guides/tree/master/codepen).

---

## Описание

Ваш друг решил открыть свою веб-студию. Для того чтобы были клиенты, веб-студии нужен свой сайт. К сожалению, другу некогда этим заниматься. Он сверстал структуру страницы, а добавить стили попросил вас.
Сейчас блок услуг веб-студии выглядит так:

![](https://netology-code.github.io/html-2-homeworks/sources/2-1/web-studio-before.png)

А надо добиться такого результата:

![](https://netology-code.github.io/html-2-homeworks/sources/2-1/web-studio-after.png)

## Процесс реализации

1. Найдите ошибки во вложенности HTML-элементов и исправьте их так, чтобы каждая карточка содержала название услуги и описание.
2. Установите ширину контентной области `1260px` для элемента с классом `services`.
3. ​​Расположите элемент с классом `services` по центру страницы. На этом этапе демо должно отображаться следующим образом:

![](https://netology-code.github.io/html-2-homeworks/sources/2-1/web-studio-stage2.jpg)

4. Установите внутренний отступ сверху `160px`, снизу - `30px`, слева и справа - `30px`для элементов с классом `card`.
5. Установите ширину контентной области `420px` для элементов с классом `card`.
6. Выровняйте текст по центру.
7. Сделайте так, чтобы блоки с услугами располагались в ряд, как показано на макете.
8. Убедитесь, что результат соответствует описанию. Для этого перейдите в режим FullPage ([скриншот](/sources/screen.md)). Если режим FullPage View выдал ошибку — вам нужно подтвердить свою учетную запись в codepen, пройдя по ссылке из письма, пришедшего от codepen, тогда все должно начать работать корректно.
